/* Element Plus 暗色主题增强配置 */

/* 确保暗色主题下的滚动条样式正确 */
html.dark .el-scrollbar {
  --el-scrollbar-opacity: 0.3;
  --el-scrollbar-bg-color: var(--el-text-color-secondary);
  --el-scrollbar-hover-opacity: 0.5;
  --el-scrollbar-hover-bg-color: var(--el-text-color-secondary);
}

/* 暗色主题下的滚动条轨道 */
html.dark ::-webkit-scrollbar-track {
  background-color: var(--el-fill-color-darker);
}

/* 暗色主题下的滚动条滑块 */
html.dark ::-webkit-scrollbar-thumb {
  background-color: var(--el-text-color-secondary);
  opacity: 0.3;
}

html.dark ::-webkit-scrollbar-thumb:hover {
  background-color: var(--el-text-color-secondary);
  opacity: 0.5;
}

/* 确保Element Plus组件在暗色主题下正确显示 */
html.dark .el-dropdown-menu {
  background-color: var(--el-bg-color) !important;
  border-color: var(--el-border-color) !important;
}

html.dark .el-dropdown-menu__item {
  color: var(--el-text-color-primary) !important;
}

html.dark .el-dropdown-menu__item:hover {
  background-color: var(--el-fill-color-light) !important;
}

/* 暗色主题下的颜色选择器 */
html.dark .el-color-picker__panel {
  background-color: var(--el-bg-color) !important;
  border-color: var(--el-border-color) !important;
}

html.dark .el-color-dropdown__main-wrapper {
  background-color: var(--el-bg-color) !important;
  border-color: var(--el-border-color) !important;
}

html.dark .el-color-dropdown__btn {
  background-color: var(--el-bg-color) !important;
  border-color: var(--el-border-color) !important;
  color: var(--el-text-color-primary) !important;
}

/* 暗色主题下的工具提示 */
html.dark .el-tooltip__popper {
  background-color: var(--el-bg-color) !important;
  border-color: var(--el-border-color) !important;
  color: var(--el-text-color-primary) !important;
}

/* 暗色主题下的消息框 */
html.dark .el-message {
  background-color: var(--el-bg-color) !important;
  border-color: var(--el-border-color) !important;
  color: var(--el-text-color-primary) !important;
}

/* 暗色主题下的确认框 */
html.dark .el-message-box {
  background-color: var(--el-bg-color) !important;
  border-color: var(--el-border-color) !important;
}

html.dark .el-message-box__title {
  color: var(--el-text-color-primary) !important;
}

html.dark .el-message-box__content {
  color: var(--el-text-color-regular) !important;
}
